


<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:已完成下载页面
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->


<template>
	<view>
		<view class="head">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<view>缓存管理</view>
			</view>
			<view class="right-wrapper">

			</view>
		</view>
		<view class="content">
			<view class="cache-list">
				<view class="cache-item" v-for="(item,key) in list" :key="key" hover-class="view-hover" @tap="clickItem(key)" @longpress="longpress(item)">
					<text class="cache-title">{{item.title}}</text>
					<text class="cache-time">{{formatTime(item.time)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				list: []
			}
		},
		onLoad() {

			let cacheVideoList = JSON.parse(uni.getStorageSync('cacheVideoList') == "" ? "[]" : uni.getStorageSync(
				'cacheVideoList'));
				
			var compare = function(item1, item2) { //比较函数
				if (item1.time < item2.time) {
					return 1;
				} else if (item1.time > item2.time) {
					return -1;
				} else {
					return 0;
				}

			}
			cacheVideoList = cacheVideoList.sort(compare);
			this.list = cacheVideoList
		},
		methods: {
			longpress(item){
				uni.showModal({
					title: '提示',
					content: '是否删除该视频？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
							this.list.forEach((item1,index)=>{
								console.log(index)
								if(item1==item){
									this.list.splice(index,1)
									uni.setStorageSync('cacheVideoList',JSON.stringify(this.list));
									uni.showToast({
										title: '删除成功'
									});
								}
								
							})
							
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			formatTime(time) {
				return this.$utils.dateToString(time)
			},
			clickItem(index) {
				uni.openDocument({
					filePath: this.list[index].path,
					fileType: 'mp4',
					fail() {
						uni.showToast({
							title: '打开失败，可能文件已删除',
							icon: 'none'
						});
					},
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: $uni-bg-color;
	}

	.head {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24rpx;
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;
		line-height: 88rpx;
		flex: 1;
	}

	.content {
		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		height: 100%;
		width: 100%;
	}

	.cache-list {
		background-color: $uni-bg-color-content;
		display: flex;
		flex-direction: column;
	}

	.cache-item {
		position: relative;
		background-color: #FFFFFF;
		padding: 24rpx;
		margin-top: 24rpx;
	}

	.cache-item:last-child {
		margin-bottom: 24rpx;
	}

	.cache-time {
		position: absolute;
		right: 24rpx;
	}
</style>
